// stylelint-disable selector-class-pattern
// CodeView
$light-gray-border-color: #f2f2f2;

.docs-codeblock {
  margin-bottom: 2rem;
}

.docs-codeblock-example,
.docs-codeblock-source {
  border: solid 3px $light-gray-border-color;
  position: relative;
}

.docs-codeblock-example {
  overflow: auto;
  transform: translate3d(0, 0, 0);
}

.docs-mobile_iframe,
.docs-mobile_frame {
  border: solid 2px $light-gray-border-color;
  width: 100%;
  max-width: 100%; /* prevents the iframe from expanding beyond its container */
  background-color: #d2d2cf1f;
}

.docs-mobile_iframe {
  border: solid 3px $light-gray-border-color;
}

$frame-spacing: 0.5rem;

.docs-mobile_frame {
  display: block;
  margin: $frame-spacing auto;
  width: calc(100% - #{2 * $frame-spacing});
  background-color: #fff;
}


.docs-device-select {
  margin-bottom: 1rem;
}

.docs-mobile_iframe + .demo-content {
  display: none;
}

.docs-codeblock-example,
.docs-codeblock-source__code {
  padding: 1rem;
}

// if the example is a viewport, remove demo showcase padding so fixed positioned elements
// can use full area of the codeblock example
.docs-codeblock-example.docs-codeblock-example_viewport {
  padding: 0;
}

.docs-codeblock-source {
  margin-bottom: 1.5rem;
}

.docs-codeblock-example + .docs-codeblock-source {
  border-top: 0;
}

.docs-codeblock-source__code.code-collapsed:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 1));
  display: block;
  height: 2.25rem;
}

.docs-codeblock-source__code.code-collapsed pre {
  height: (21px * 3); // Line-height * lines to show
  overflow: hidden;
}

.docs-codeblock-source__code.code-expanded pre {
  height: auto;
}

.docs-codeblock__action-bar {
  display: flex;
  justify-content: flex-end;
  border-bottom: 1px solid $light-gray-border-color;
  background: #fff;
}

.docs-codeview__density-bar {
  display: flex;
  justify-content: flex-end;
  background: $light-gray-border-color;
  margin: -1rem -1rem 1rem;
  padding: 0.25rem 0.5rem;
}

.docs-codeview__density-bar-form {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.docs-codeblock__action-bar li {
  padding: 0 0.5rem;
  border-left: 1px solid $light-gray-border-color;
}

.doc-toggle-code__button {
  font-weight: 700;
}

.docs-codeblock_frame {
  border: 3px solid $light-gray-border-color;
  background-color: #d2d2cf1f;
}

.docs-codeblock__device-selector {
  border-top: 1px solid $light-gray-border-color;
  border-bottom: 0;
}

.docs-codeblock__device-selector li {
  padding: 0 0.5rem;

  .slds-form-element {
    align-items: center;
    display: flex;
    margin-bottom: 0;

    .slds-form-element__label {
      flex: 1 1 auto;
      float: none;
      max-width: none;
      padding: 0;
    }

    .slds-form-element__control {
      flex: 1 1 auto;
      padding-left: 5%;
    }
  }
}

// Type Styles
// Type scale — http://www.modularscale.com/?1&em&1.2
.doc {
  color: #5876a3;
  font-size: 1rem;
}

h1.doc,
h2.doc,
h3.doc,
h4.doc,
h5.doc,
h6.doc {
  color: #16325c;

  a.doc-anchor {
    color: #706e6b;
    font-size: 1.25rem;
    margin-left: 0.5rem;

    &:hover,
    &:focus {
      color: #0070d2;
      text-decoration: none;
    }
  }
}

h1.doc {
  font-size: 2.488rem;
  margin-bottom: 2rem;
}

h2.doc {
  font-size: 2.074rem;
  margin: 4rem 0 1rem;
}

h3.doc {
  font-size: 1.728rem;
  margin: 2rem 0 1rem;
}

h4.doc {
  font-size: 1.44rem;
  margin: 2rem 0 1rem;
}

h5.doc {
  font-size: 1.2rem;
  margin: 1rem 0;
}

h6.doc {
  font-size: 1rem;
  text-transform: uppercase;
  margin: 1rem 0;
}

p.doc {
  font-size: 1rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

p.doc:first-child {
  margin-top: 0;
}

a.doc {
  color: #0070d2;
}

.lead {
  font-size: 1.44rem;
  font-weight: 300;
  margin-bottom: 3rem;
}

blockquote.doc {
  background-color: #fafaf9;
  font-size: 1.125rem;
  font-weight: 300;
  padding: 1rem;
  margin: 0 0 1.5rem;
  border: 1px solid $light-gray-border-color;
  border-left-width: 0.125rem;

  .doc {
    color: #3e3e3c;
  }

  h4.lead {
    font-size: 1rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
  }

  p {
    margin: 0.5rem 0;
  }

  .lead {
    margin-bottom: 0;
    font-weight: 600;
  }
}

blockquote.doc p:only-child,
blockquote.doc p:first-child {
  margin-top: 0;
}

blockquote.doc p:only-child,
blockquote.doc p:last-child {
  margin-bottom: 0;
}

// this is the default blockquote color
.site-blockquote_note.doc {
  border-left-color: #00396b;

  .lead {
    color: #00396b;
  }
}

.site-blockquote_a11y.doc {
  border-left-color: #0070d2;

  .lead {
    color: #0070d2;
  }
}

.site-blockquote_warning.doc {
  border-left-color: #ffb75d;

  // the following text color is different to meet the a11y ratio
  .lead {
    color: #d47500;
  }
}

ul.doc,
ol.doc {
  margin: 0 0 1.5rem 3rem;
}

ul.doc {
  list-style: disc;

  ul.doc {
    list-style: circle;
  }
}

ol.doc {
  list-style: decimal;
}

ul.doc > li.doc >  ol.doc {
  margin-bottom: 0;
}

table.doc {
  background: #fff;
  border: 1px solid $light-gray-border-color;
  margin-bottom: 1.5rem;
}

td.doc,
th.doc {
  padding: 0.5rem;
}

thead.doc th.doc,
thead.doc td.doc {
  padding: 0.5rem;
}

tr.doc td.doc,
tr.doc th.doc {
  border-top: 1px solid $light-gray-border-color;
}

tr.doc td:not(:first-child),
tr.doc th:not(:first-child) {
  border-left: 1px solid $light-gray-border-color;
}

code.doc {
  background: #f6f9fb;
  color: #1990b8;
  padding: 0 2px;
  border-radius: 0.125rem;
}

ul.doc-toc {
  margin-left: 0;
  list-style: none;
}

.doc-toc li.doc a {
  font-size: 0.875rem;
  font-weight: 700;
}

li.doc > li.doc,
ul.doc > li.doc {
  margin-left: 0.4rem;
}

li.doc > ul.doc,
ul.doc > ul.doc {
  margin-left: 1rem;
}

li.doc > ul.doc {
  margin-bottom: 0;
}

.doc-toc > li.doc > ul.doc > li.doc a {
  font-weight: 400;
}

.doc-toc > li.doc > ul.doc ul.doc > li.doc a {
  font-size: 0.75rem;
  font-weight: 400;
  color: #4872ab;
}

h2.doc-toc-header {
  font-size: 1rem;
  border-bottom: 1px solid #d9dbdd;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}

.doc-tokens-group .slds-button {
  margin: 1rem 0;
}

.doc-token {
  display: inline-flex;
  padding: 0.5rem;
  font-size: 0.75rem;
}

.doc-token__image {
  width: 4rem;
  height: 4rem;
  background:
    linear-gradient(45deg, rgba(43, 40, 38, 0.1) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(43, 40, 38, 0.1) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(43, 40, 38, 0.1) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(43, 40, 38, 0.1) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  border: 1px solid #dddbda;
  border-radius: 4px;
  padding: 4px;
}

.doc-token__image > div {
  width: 100%;
  height: 100%;
  box-shadow: rgba(43, 40, 38, 0.1) 0 0 0 1px inset;
  border-radius: 4px;
}

.doc-spacing {
  display: inline-flex;
  outline: 1px dashed rgba(43, 40, 38, 0.35);
}

.doc-padding {
  width: 8rem;
  height: 8rem;
}

.doc-padding:before {
  content: '';
  display: block;
  background: #1589ee;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  border-radius: 4px;
}

.doc-margin {
  width: 3rem;
  height: 3rem;
}

.doc-margin_content {
  background: #1589ee;
  border-radius: 4px;
}

.demo-only_viewport > * {
  position: absolute;
}
